<template>
	<div id="book_page">
		<div class="commons_top">
			<div class="commons_back" @click="$router.go(-1)">
				<img src="@/assets/index/back.png" />
			</div>
			<span class="commons_title">我的收藏</span>
		</div>
		<div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
			<div class="collect_nav">
					<span class="collect_tab" :class="tabIndex==index?'select':''" v-for="(item,index) in navTab" :key="index"
					@click="changeTab(item.type,index)">{{item.name}}</span>
			</div>
			<div v-if="pageList&&pageList.length>0">
					<div class="collect_list" :class="item.isTouchMove ? 'touch-move-active' : ''"
					@click.stop="toDetails(item.objectId,item.objectType,index)" v-for="(item,index) in pageList" :key="index">
						<van-swipe-cell>
							<div class='content'>
								<div :class="item.objectType==4?'collect_video':'collect_audio'">
									<img class='collect_cover' v-if="item.cover" :src="coverUrl(item.cover)">
									<img class="collect_cover" v-if="item.objectType==4&&item.imgPath&&!item.cover" :src="coverUrl(item.imgPath,'file')" >
									<img class="collect_cover" v-if="item.objectType==4&&!item.cover&&!item.imgPath" src="@/assets/common/default_video.png" >
									<img class="collect_cover" v-if="item.objectType==5&&!item.cover" src="@/assets/common/default_audio.png" >
									<img src="@/assets/index/video_icon.png" v-if="item.objectType==4" class="collect_icon">
									<img src="@/assets/index/audio_icon.png" v-else class="collect_icon">
								</div>
								<div class="collect_con">
									<div class="collect_text">{{item.name}}</div>
									<div class="collect_info">{{item.synopsis}}</div>
									<div class="collect_box">
										<span class="price" v-if="item.realPrice>0">￥{{item.realPrice.toFixed(2)}}</span>
										<span class="free" v-else>免费</span>
										<span class="browse">浏览 {{item.browseNum}}</span>
									</div>
								</div>
							</div>
							<template #right>
								<van-button square text="删除" type="danger" class="delete-button" @click="del(item.id,item.objectType)" />
							</template>
						</van-swipe-cell>
					</div>
			</div>
			<p v-if="loading" class="book-infinite-loading">
				<span>
					<mt-spinner type="fading-circle"></mt-spinner>
					加载中...
				</span>
			</p>
			<p v-else class="loadOver">
				<span v-if="!isNull && isLast">—— 我是有底线的 ——</span>
			</p>
			<div v-if="pageList && pageList.length<=0 && !loading" class="resource_null">
				<img src="@/assets/common/no_collect.png" class="null_image">
				<div class="null_tips">暂无收藏</div>
				<router-link :to="{name:'index'}"><div class="null_book">去书库逛逛</div></router-link>
			</div>
		</div>
	</div>
</template>

<script>
import '@static/css/common.css'
import { navTab } from '@/utils/static.js'
import { cancelFavAPI, getListAPI } from '@/api/person.js'
import { Toast } from 'mint-ui';

export default {
	data() {
		return {
			navTab,
			tabIndex: 0,
			pageList: [],
			listQuery: {
				resourceType: 4,
				pageNum: 1,
				pageSize: 10,
			},
			loading:false,
			isNull: "",
			isLast: "",
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		changeTab(type,index) { //tab切换
			this.tabIndex = index
			this.listQuery.resourceType = type
			this.listQuery.pageNum = 1
			this.pageList = []
			this.getList()
		},
		getList() {//资源列表
			this.loading = true
			getListAPI(this.listQuery).then(res => {
				if(res.data.code==0){
					let list = []
					if (this.pageList && this.pageList.length > 0) {
						list = this.pageList.concat(res.data.data.list)
					} else {
						list = res.data.data.list
					}
					if(list){
						list.forEach((res, idx) => {
							list[idx].isTouchMove = false
						})
					}
					this.pageList = list
					this.totalPage = res.data.data.pages
					this.isNull = list && list.length > 0 ? false : true;
          this.isLast = res.data.data.pages == this.listQuery.pageNum ? true : false;
					this.loading = false
				} else {
					Toast(res.data.msg)
				}
			})
		},
		del(id,type) { //取消收藏-删除事件
			let that = this
			let arr = []
			arr.push(id)
			this.$confirm('确认要取消收藏此条信息吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				center: true
			}).then(() => {
				cancelFavAPI(arr).then(res => {
					if(res.data.code==0){
						Toast('已取消收藏')
						this.pageList = []
						that.getList()
					}else{
						Toast(res.data.msg)
					}
				})
			})
		},
		toDetails(id,type,index) {  //跳转详情页面
			if (type == '4') {//视频详情
				// localStorage.setItem("videoId",id)
				this.navigationFuc('videoDet', { id });
			} else {//音频详情
				// localStorage.setItem("audioId",id)
				this.navigationFuc('audioDet', { id });
			}
		},
		loadMore() {//下一页
			if (this.totalPage > this.listQuery.pageNum) {
				this.listQuery.pageNum = this.listQuery.pageNum + 1;
				this.getList();
			}
		},
	},
}
</script>

<style scoped>
#book_page{
	padding-bottom: 0.3rem;
}
.loadOver {
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: #999999;
  font-size: 14px;
}
.collect_nav {
	padding: 0 0.3rem;
	box-sizing: border-box;
	margin-bottom: 0.3rem;
	margin-top: 0.2rem;
}
.collect_nav .collect_tab {
	color: #8F8DAB;
	font-size: 14px;
	font-weight: bold;
	margin-right: 0.9rem;
}
.collect_nav .select {
	color: #FD6F6B;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 0.15rem;
	border-bottom: 0.04rem solid #FD6F6B;
}
.collect_list{
  border-bottom: 1px solid #EEEEEE;
}
.content {
  min-width: 0;
  display: flex;
  padding: 0.3rem;
  box-sizing: border-box;
}
.collect_video{
  height: 1.46rem;
  width: 2.6rem;
  margin-right: 0.26rem;
  position: relative;
}
.collect_audio {
  width: 1.78rem;
  height: 1.78rem;
  margin-right: 0.26rem;
  position: relative;
}
.collect_cover{
  height: 100%;
  width: 100%;
  border-radius: 0.08rem;
}
.collect_icon {
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  bottom: 0.16rem;
  right: 0.16rem;
}
.collect_con {
  flex: 1;
}
.collect_text{
  font-weight:bold;
  font-size: 15px;
  width: 4rem;
  color: #5D5F71;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.collect_info {
  width: 100%;
  margin-top: 0.26rem;
  color: #5D5F71;
  font-size: 12px;
  white-space: normal;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  text-overflow:ellipsis;
  display: -webkit-box;
  height: 0.68rem;
}
.collect_box {
  overflow: hidden;
  margin-top: 0.2rem;
}
.collect_box .price {
  color: #FD2023;
  font-size: 12px;
  font-weight: 500;
  float: left;
}
.collect_box .free {
  color: rgb(10, 181, 98);
  font-size: 12px;
  font-weight: 500;
  float: left;
}
.collect_box .browse {
  color: #B1B1C3;
  font-size: 11px;
  font-weight: 500;
  float: right;
}
/*无数据*/
.resource_null{
  text-align: center;
}
.resource_null .null_image{
  width: 3.21rem;
  height:auto;
  margin: 0 auto;
  font-weight:500;
  margin-top: 1.8rem;
}
/* .resource_null .null_text{
  margin-top: 0.5rem;
  color: #696969;
  font-size: 16px;
} */
.resource_null .null_tips{
  margin-top: 0.4rem;
  color: #E0E0E0;
  font-size: 14px;
}
.resource_null .null_book {
	width: 3.39rem;
	height: 0.8rem;
	text-align: center;
	line-height: 0.8rem;
	margin: 1.02rem auto 0;
	background: #FF7167;
	border-radius: 0.1rem;
	color: #FAFAFA;
	font-size: 14px;
	font-weight: bold;
}
.book-infinite-loading{
  text-align: center;
  padding: 10px;
  color: #999999;
}
.delete-button {
	height: 100%;
}
</style>
<style>
.mint-spinner-fading-circle{
  margin: 0 auto;
  margin-bottom: 10px;
  font-size: 14px;
}
.page-infinite-loading{
  text-align: center;
  padding: 10px;
  color: #999999;
  font-size: 14px;
}
.el-message-box {
	width: 250px !important;
}
</style>
